<template>
    <div>
	 	<div class="container" style="border: none;">

			<div class="search">
				<el-row type="flex" :gutter="4">
					<el-col :span="3">
						<el-input v-model="search.member_id" placeholder="会员ID" clearable></el-input>
					</el-col>
					<el-col :span="4">
						<el-select v-model="search.type" placeholder="请选择类型">
                            <el-option
                                v-for="(name,type) in typeName"
                                :key="type"
                                :value="type"
                                :label="name">
                            </el-option>
                        </el-select>
					</el-col>
					<el-col :span="12">
						<el-date-picker
						  v-model="search.date"
						  type="daterange"
						  format="yyyy-MM-dd"
						  range-separator="至"
						  start-placeholder="开始日期"
						  end-placeholder="结束日期">
						</el-date-picker>
					</el-col>
					<el-col :span="4">
						<el-button :loading="ifload" type="primary" @click="searchRes" icon="el-icon-search">搜索</el-button>
					</el-col>
				</el-row>
			</div>

            <div style="line-height: 40px;">
               投资总额：{{inNum}}  &nbsp; &nbsp; &nbsp; &nbsp; 矿产总额：{{total}}
            </div>

			<el-table
				:data="list"
				border
				v-loading="ifload"
				>
				<el-table-column
					prop="id"
					label="序号"
                    align="center"
					width="120">
				</el-table-column>
				<el-table-column
					prop="member_id"
					label="会员ID"
                    align="center">
				</el-table-column>
				<el-table-column
					prop="in_num"
                    align="center"
					label="挖矿金额(投资金额)">
				</el-table-column>
				<el-table-column
					prop="total_num"
                    align="center"
					label="总矿产">
				</el-table-column>
				<el-table-column
					prop="type"
                    align="center"
					label="类型">
					<template slot-scope="scope">
						<span>{{typeName[scope.row.type]}}</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="create_time"
                    align="center"
					label="操作时间">
					<template slot-scope="scope">
						<span>{{scope.row.create_time*1000 | formatDate}}</span>
					</template>
				</el-table-column>
				<el-table-column
                    align="center"
					label="操作">
				</el-table-column>

			</el-table>

            <div class="pagination">
                <el-pagination background
					@current-change="handleCurrentChange"
					layout="prev, pager, next"
					:total="pages"
					:page-size="page_size">
                </el-pagination>
            </div>
		</div>

 	</div>
</template>

<script type="text/javascript">
import {download} from '@/components/js/request'
export default{
	data() {
		return {
			ifload:true,
            avatarDefault:require("../../assets/avatar_default.png" ),
			list:[],
            typeName:[],
            withdrawState:[],
            total:0,
            inNum:0, //投资总额

			page:1,
			page_size:10,
			pages:0,

			search:{
				member_id:'',
				state:'',
                date:'',
                type:'',
			}
		}
	},
	created() {
		this.$nextTick(()=>{
			this.getData();
		})
	},
	computed:{
	},
	methods:{
		getData() {
			let params = {
				page:this.page,
				page_size:this.page_size,
				search:JSON.stringify(this.search),
			}
			this.ifload = true;
			this.$post_('finance/invest/invset_order',params,(res) => {
				console.log(res);
				if(res.code=='0'){
					this.list = res.data;
					this.pages = Number(res.extend.pages);
                    this.total = res.extend.total;
                    this.typeName = res.extend.type_name;
                    this.inNum = res.extend.inNum;
					this.ifload = false;
				}
			});
		},
        // 分页导航
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
		//搜索
		searchRes() {
			this.page = 1;
			this.getData();
		},

	}
}
</script>

<style type="text/css">
    thead tr th{
        text-align: center;
    }
    .red{
        color: #ff0000;
    }
	.search{
		margin-bottom: 10px;
	}
</style>
